<template>
  <div class="paper__update__container">
    <div class="header">
      <div class="tabs_box">{{ title }}</div>
      <div class="btns">
        <el-button
          round
          @click="savePrepareClass"
          :disabled="prepareLesson === '' && prepareLesson.id === null"
          v-if="!prepareLesson.checkStatus || prepareLesson.checkStatus === 0"
          >提交备课</el-button
        >
        <el-button
          round
          @click="savePrepareClass"
          v-if="prepareLesson.checkStatus === 1"
          >已提交</el-button
        >
        <el-button round v-if="prepareLesson.checkStatus === 2" disabled
          >已备课</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <div class="course-img">
          <img
            src="/src/assets/prepare-teach/course-bg.png"
            style="width: 130px"
            alt="点津问道标品"
          />
        </div>
        <div class="class-top">
          <h2>{{ courseDto.courseName || title }}</h2>
          <div class="class-list">
            <div>
              <p class="front">
                <span class="span-title">科目：</span
                ><span class="span-content">{{
                  courseDto.subjectName || "无"
                }}</span>
              </p>
              <p>
                <span class="span-title">年级：</span
                ><span class="span-content">{{
                  courseDto.courseTypeName || "无"
                }}</span>
              </p>
            </div>
            <div>
              <p class="front">
                <span class="span-title">课程类型：</span
                ><span class="span-content">{{
                  courseDto.gradeName || "无"
                }}</span>
              </p>
              <p>
                <span class="span-title">保存时间：</span
                ><span class="span-content">{{
                  prepareLesson.modifyTime || "无"
                }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="tabs-box">
          <div
            class="tab-cell"
            :class="{ active: tabType === n.type }"
            v-for="n in tabCountList"
            :key="n"
            @click="
              tabType = n.type;
              request(n.type);
            "
          >
            <div>
              <span>{{ n.name }}</span
              ><i>{{ n.num }}</i>
            </div>
          </div>
        </div>
        <div class="main-content">
          <div class="btn-box">
            <el-button type="primary" round @click="uploadMyPlan(item)"
              >上传我的教案</el-button
            >
            <el-button type="primary" round @click="uploadMyVideo(item)"
              >上传我的说课</el-button
            >
          </div>
          <div class="content-list-box">
            <div
              class="content-list-box-item"
              v-for="(item, index) in allFileList"
              :key="index"
            >
              <div class="content-list-box-item-bg">
                <img
                  class="img-cover"
                  style="width: 116px"
                  v-if="
                    item.ext !== 'mp3' &&
                    item.ext !== 'zip' &&
                    item.ext !== 'rar' &&
                    item.mediaType == null
                  "
                  :src="`${domain}${item.imgPath}`"
                  alt="点津问道标品"
                />
                <img
                  v-else
                  src="/src/assets/prepare-teach/weizhiwenjian.png"
                  alt="点津问道标品"
                />
              </div>
              <div class="content-list-box-item-title">
                <p>{{ item.fileName }}</p>
              </div>
              <div class="btn-group">
                <div class="btn-preview">
                  <div @click="preview(item)">
                    <i class="el-icon-search" /><span>预览</span>
                  </div>
                </div>
                <div class="private">
                  <i
                    class="iconfont iconyinsi"
                    v-if="item.isPublic == 0"
                    style="font-size: 12px"
                  ></i>
                </div>
              </div>
            </div>
            <cus-empty v-if="!allFileList.length" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, inject } from 'vue';
import MyPlanUpload from './my-plan-upload.vue'
import MyVideoUpload from './my-video-upload.vue'
import { ElMessage, ElLoading } from 'element-plus'
import $ from '$';

export default {
  props: {
    id: String,
    title: String,
  },
  setup(props) {
    let close: any = inject("close");
    let domain = import.meta.env.VITE_APP_BASE_URL;
    let tabType = ref(null);

    /*---------获取上部展示数据------------*/
    let courseDto: any = ref({});
    let prepareLesson: any = ref({});
    $.http
      .post("/admin/prepareLesson/queryPrepareLessonByCourseIndexId", {
        courseIndexId: props.id,
      })
      .then((res) => {
        if (res.result) {
          courseDto.value = res.json.courseDto || {};
          res.json.prepareLesson
            ? (prepareLesson.value = res.json.prepareLesson)
            : {};
        }
      });
    /*---------获取tab标签数据------------*/
    let tabCountList = ref([
      { name: "全部", nameKey: "totalCount", num: 0, type: null },
      { name: "课件", nameKey: "courseWareCount", num: 0, type: 1 },
      { name: "讲义", nameKey: "handoutCount", num: 0, type: 2 },
      { name: "教案", nameKey: "teachplanCount", num: 0, type: 5 },
      { name: "说课视频", nameKey: "mediaCount", num: 0, type: 3 },
      { name: "其他", nameKey: "otherCount", num: 0, type: 4 },
    ]);
    const tabCountRequest = async () => {
      let res = await $.http.post(
        "/admin/prepareLesson/queryMaterialCountByCourseIndexId",
        { courseIndexId: props.id }
      );
      if (res.result) {
        let arr = Object.entries(res.json);
        arr.map(([key, value]) => {
          tabCountList.value.map((item: any) => {
            if (item.nameKey == key) {
              return (item.num = value);
            }
          });
        });
      }
    };
    tabCountRequest();
    /*---------获取内容图片数据------------*/
    let allFileList = ref([]);
    const request = async (type) => {
      let res = await $.http.post(
        "/admin/prepareLesson/queryMaterialByCourseIndexId",
        { courseIndexId: props.id, type: type }
      );
      if (res.result) {
        allFileList.value = res.json.sort(
          (a, b) => a.resCreateTime - b.resCreateTime
        );
      }
    };
    request("");
    /*---------上传我的教案------------*/
    const uploadMyPlan = () => {
      $.modal
        .create({
          title: "上传我的教案",
          width: 640,
          component: MyPlanUpload,
          props: { id: props.id },
          zIndex: 2011,
        })
        .then((data: any) => {
          if (data.json) {
            request(tabType.value);
            tabCountRequest();
          }
        });
    };
    /*---------上传我的说课------------*/
    const uploadMyVideo = () => {
      $.modal
        .create({
          title: "上传我的说课",
          width: 640,
          component: MyVideoUpload,
          props: { id: props.id },
          zIndex: 2011,
        })
        .then((data: any) => {
          if (data.json) {
            request(tabType.value);
            tabCountRequest();
          }
        });
    };
    /*---------提交备课------------*/
    const savePrepareClass = () => {
      let __params = {
        courseId: courseDto.value.id,
        courseIndexId: courseDto.value.courseIndexId,
        prepareLessonId: prepareLesson.value.id,
      };
      $.http
        .post("/admin/prepareLesson/submitPrepareLessonById", __params)
        .then((res) => {
          if (res.result) {
            ElMessage.success("提交成功");
            close(res.result);
          } else {
            ElMessage.error(res.msg);
          }
        });
    };
    /*-----预览-----*/
    const preview = (item) => {
      if (item.mediaType === "url") {
        window.open(item.filePath);
      } else {
        const loading = ElLoading.service({
          lock: true,
          background: "rgba(255, 255, 255, .7)",
          text: "加载中...",
        });
        let src = `${$.utils.generatBasePath()}furl=${
          import.meta.env.VITE_APP_BASE_URL
        }${item.filePath}`;
        let closeBtn = $.element("div", {
          className: "el-icon-close",
          style: {
            width: "36px",
            height: "36px",
            lineHeight: "36px",
            textAlign: "center",
            background: "#fff",
            borderRadius: "50%",
            fontSize: "24px",
            position: "fixed",
            top: "40px",
            right: "40px",
            zIndex: "10",
            cursor: "pointer",
          },
          on: {
            click: () => {
              container.remove();
            },
          },
        });
        let container;
        if (item.ext === "mp4") {
          let video = $.element("video", {
            attrs: {
              src: `${import.meta.env.VITE_APP_BASE_URL}${item.filePath}`,
              width: "100%",
              height: "100%",
              controls: "true",
              controlsList: "nodownload",
            },
            style: { background: "#f9f9f9" },
          });
          video.oncanplay = loading.close;
          container = $.element(
            "div",
            {
              style: {
                width: "100%",
                height: "100%",
                position: "absolute",
                top: "0",
                left: "0",
                zIndex: "2012",
                background: "rgba(0,0,0,.8)",
              },
            },
            [closeBtn, video]
          );
        } else if (item.ext === null && item.mediaType === "url") {
          loading.close();
          let url = $.element(
            "p",
            {
              style: {
                background: "#f9f9f9",
                width: "100%",
                height: "100%",
                padding: "36px",
                fontSize: "20px",
              },
            },
            "链接地址：" + item.filePath
          );
          container = $.element(
            "div",
            {
              style: {
                width: "100%",
                height: "100%",
                position: "absolute",
                top: "0",
                left: "0",
                zIndex: "2012",
                background: "rgba(0,0,0,.8)",
              },
            },
            [closeBtn, url]
          );
        } else {
          let iframe = $.element("iframe", {
            attrs: { src, width: "100%", height: "100%" },
            style: { background: "#f9f9f9" },
          });
          iframe.onload = loading.close;
          container = $.element(
            "div",
            {
              style: {
                width: "100%",
                height: "100%",
                position: "absolute",
                top: "0",
                left: "0",
                zIndex: "2012",
                background: "rgba(0,0,0,.8)",
              },
            },
            [closeBtn, iframe]
          );
        }
        document.body.appendChild(container);
      }
    };

    return {
      close,
      tabCountList,
      courseDto,
      request,
      allFileList,
      prepareLesson,
      uploadMyPlan,
      tabCountRequest,
      uploadMyVideo,
      savePrepareClass,
      preview,
      domain,
      tabType,
    };
  },
};
</script>
<style lang="scss" scoped>
.paper__update__container {
  background: $--background-color-base;
  padding-bottom: 1px;
  // min-height: 100%;
  .cus__empty__container {
    margin: 0 auto;
  }
  .header {
    background: $--color-primary;
    padding: 0 80px;
    display: flex;
    height: 60px;
    line-height: 60px;
  }
  .save {
    color: #fff;
    i {
      font-size: 24px;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .btns {
    margin-left: 30px;
    button {
      color: #72b22a;
      padding: 10px 23px;
      input {
        display: none;
      }
    }
  }
  .save,
  .btns {
    width: 200px;
    text-align: right;
  }
  .tabs_box {
    flex: auto;
    color: #fff;
    font-size: 18px;
    ul {
      display: inline-block;
    }
    li {
      float: left;
      padding: 0 20px;
      color: #fff;
      font-size: 18px;
      list-style: none;
      position: relative;
      cursor: pointer;
      &.active::after {
        content: "";
        display: block;
        width: 100%;
        height: 6px;
        background: #faad14;
        border-radius: 3px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .content {
    width: 1200px;
    margin: 20px auto;
    .content-top {
      padding: 20px 30px;
      background: #fff;
      border-radius: 10px;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 30px;
      .class-top {
        padding: 10px 50px;
        h2 {
          font-size: 18px;
          color: #333;
          font-weight: 600;
        }
        .class-list {
          margin-top: 30px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          div {
            line-height: 30px;
            .front {
              width: 200px;
            }
            .span-title {
              font-weight: 500;
            }
            .span-content {
              color: #77808d;
            }
          }
        }
      }
    }
    .tabs-box {
      display: flex;
      background: rgb(245, 247, 250);
      .tab-cell {
        height: 50px;
        padding: 0 10px 0 20px;
        margin-right: 18px;
        line-height: 50px;
        box-shadow: 0 -2px 6px 0 rgba(91, 125, 255, 0.08);
        position: relative;
        cursor: pointer;
        &.active {
          &::before {
            z-index: 1;
          }
          i {
            color: #fff;
            background: #faad14;
          }
        }
        & > div {
          position: relative;
          z-index: 2;
          i {
            display: inline-block;
            height: 20px;
            padding: 0 10px;
            margin-left: 10px;
            color: #77808d;
            line-height: 20px;
            border-radius: 10px;
            background: #e0e1e6;
          }
        }
        &::before {
          content: "";
          border-bottom: none;
          background: #fff;
          box-shadow: 0 -2px 6px 0 rgba(91, 125, 255, 0.08);
          transform: perspective(1em) scale(1.3, 1.35) rotateX(5deg);
          transform-origin: bottom left;
          border-radius: 6px 6px 0 0;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
    .main-content {
      padding: 20px;
      background: #fff;
      box-shadow: 0px -2px 6px 0px rgba(91, 125, 255, 0.08);
      .num {
        margin-left: 5px;
        padding: 0 15px;
        background: rgba(119, 128, 141, 0.2);
        color: #77808d;
        height: 20px;
        width: 50px;
        border-radius: 15px;
      }
      .btn-box {
        .el-button {
          padding-top: 10px;
          padding-bottom: 10px;
          font-weight: 400;
        }
      }
      .content-list-box {
        padding: 20px 0;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        &-item {
          flex: 0 0 16.6%;
          margin-bottom: 15px;
          position: relative;
          box-sizing: border-box;
          padding: 10px 25px;
          height: 155px;
          border-radius: 6px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          &:hover .btn-group {
            display: flex;
          }
          .btn-group {
            width: 160px;
            height: 155px;
            border-radius: 4px;
            background: rgba($color: #000, $alpha: 0.15);
            position: absolute;
            top: 0;
            left: 15px;
            opacity: 0;
            transition: all 0.25s;
            .btn-preview {
              width: 84px;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: -10px;
              transform: translate3d(-50%, -50%, 0);
              div {
                color: #72b22a;
                font-size: 12px;
                line-height: 24px;
                text-align: center;
                border-radius: 12px;
                background: #fff;
                cursor: pointer;
                &:last-child {
                  margin-top: 10px;
                }
                &:active {
                  opacity: 0.8;
                }
                i {
                  font-weight: bold;
                  margin-right: 3px;
                }
              }
            }
            .private {
              display: block;
            }
          }
          &:hover {
            .btn-group {
              opacity: 1;
            }
          }
          &-bg {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 116px;
            height: 87px;
            position: relative;
            .img-cover {
              object-fit: cover;
              width: 100%;
              height: 100%;
            }
            .btn-group {
              position: absolute;
              top: 33px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              height: 60px;
            }
          }
          &-title {
            text-align: center;
            text-justify: inter-ideograph;
            margin-top: 8px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #333333;
            overflow: hidden;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            p {
              text-align: left;
            }
          }
          .private {
            display: none;
            position: absolute;
            left: 4px;
            bottom: 4px;
            z-index: 10;
            padding: 0 5px;
            background: rgba(0, 0, 0, 0.52);
            border-radius: 5px;
            color: #fff;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1280px) {
  .paper__update__container {
    .content {
      width: 100%;
    }
  }
}
</style>
